<template>
	<view >
		<view class="container container-wrap" style="background-color: #FFFFFF;">
			<view style="height: 3px;width: 100%;background-color: #F3F4F6;"></view>
			<ad unit-id="adunit-21a6bcd0e78f8ff8"></ad>
			<u-cell-group>
				<u-cell-item @click="toInfo('通用')">
					<view slot="title" style="display: flex;">
						<view style="width:100rpx ;height: 100rpx;">
							<image  style="margin-top: 20rpx;width:100rpx ;height: 100rpx;" src="https://img.alicdn.com/tfs/TB1Ij98DQPoK1RjSZKbXXX1IXXa-517-517.png"></image >
						</view>
 
						<view style="margin-left: 20rpx;">
							<view>通用发音人</view>
							<view style="color:#AAAAAA;font-size: 12px;">温柔女声、标准男声、标准女声、儿童剧男声、儿童剧女声</view>
						</view>
					</view>
				</u-cell-item>
			</u-cell-group>
			<view style="height: 3px;width: 100%;background-color: #F3F4F6;"></view>
			<u-cell-group>
				<u-cell-item  @click="toInfo('客服')">
					<view slot="title" style="display: flex;">
						<view style="width:100rpx ;height: 100rpx;">
							<image style="margin-top: 20rpx;width:100rpx ;height: 100rpx;" src="https://img.alicdn.com/tfs/TB1VmzHbjMZ7e4jSZFOXXX7epXa-238-238.png"></image>
						</view>

						<view style="margin-left: 20rpx;">
							<view>客服</view>
							<view style="color:#AAAAAA;font-size: 12px;">亲和女声、温柔女声、严厉女声、甜美女声、浙普女声、自然男声</view>
						</view>
					</view>
				</u-cell-item>
			</u-cell-group>
			<view style="height: 3px;width: 100%;background-color: #F3F4F6;"></view>
			<u-cell-group>
				<u-cell-item  @click="toInfo('直播')">
					<view slot="title" style="display: flex;">
						<view style="width:100rpx ;height: 100rpx;">
							<image  style="margin-top: 30rpx;width:100rpx ;height: 100rpx;" src="https://img.alicdn.com/tfs/TB1Ij98DQPoK1RjSZKbXXX1IXXa-517-517.png"></image>
						</view>

						<view style="margin-left: 20rpx;">
							<view>直播</view>
							<view style="color:#AAAAAA;font-size: 12px;">吆喝女声、东北老铁、亲切女声、知性女声、激昂解说、卖场广播、悬疑解说、活力女声、温暖男声、沉稳男声</view>
						</view>
					</view>
				</u-cell-item>
			</u-cell-group>
			<view style="height: 3px;width: 100%;background-color: #F3F4F6;"></view>
			<u-cell-group>
				<u-cell-item  @click="toInfo('童声')">
					<view slot="title" style="display: flex;">
						<view style="width:100rpx ;height: 100rpx;">
							<image style="width:100rpx ;height: 100rpx;" src="https://img.alicdn.com/tfs/TB1NW9ZDMDqK1RjSZSyXXaxEVXa-516-516.png"></image>
						</view>

						<view style="margin-left: 20rpx;">
							<view>童声</view>
							<view style="color:#AAAAAA;font-size: 12px;">儿童音、萝莉女声、治愈童声</view>
						</view>
					</view>
				</u-cell-item>
			</u-cell-group>
			<view style="height: 3px;width: 100%;background-color: #F3F4F6;"></view>
			<u-cell-group>
				<u-cell-item   @click="toInfo('英文')">
					<view slot="title" style="display: flex;">
						<view style="width:100rpx ;height: 100rpx;">
							<image style="margin-top: 20rpx;width:100rpx ;height: 100rpx;" src="https://img.alicdn.com/tfs/TB1Qa9ZDMDqK1RjSZSyXXaxEVXa-517-517.png"></image>
						</view>

						<view style="margin-left: 20rpx;">
							<view>英文</view>
							<view style="color:#AAAAAA;font-size: 12px;">美式女声、美音男声、英音男声、英音女声、英中双语</view>
						</view>
					</view>
				</u-cell-item>
			</u-cell-group>
			<view style="height: 3px;width: 100%;background-color: #F3F4F6;"></view>
			<u-cell-group>
				<u-cell-item  @click="toInfo('方言')">
					<view slot="title" style="display: flex;">
						<view style="width:100rpx ;height: 100rpx;">
							<image style="margin-top: 30rpx;width:100rpx ;height: 100rpx;" src="https://img.alicdn.com/tfs/TB1Ek54DPTpK1RjSZKPXXa3UpXa-517-517.png"></image>
						</view>

						<view style="margin-left: 20rpx;">
							<view>方言</view>
							<view style="color:#AAAAAA;font-size: 12px;">粤语女声、东北话男声、天津话男声、台湾话女声、东北话女声、湖南重口音、四川话女声</view>
						</view>
					</view>
				</u-cell-item>
			</u-cell-group>
			<view style="height: 3px;width: 100%;background-color: #F3F4F6;"></view>
			<u-cell-group>
				<u-cell-item  @click="toInfo('多语种')">
					<view slot="title" style="display: flex;">
						<view style="width:100rpx ;height: 100rpx;">
							<image style="margin-top: 30rpx;width:100rpx ;height: 100rpx;" src="https://img.alicdn.com/tfs/TB1lqGYDRLoK1RjSZFuXXXn0XXa-517-517.png"></image>
						</view>

						<view style="margin-left: 20rpx;">
							<view>多语种</view>
							<view style="color:#AAAAAA;font-size: 12px;">日语女声、日语男声、印尼女声、马来语女声、菲律宾语女声</view>
						</view>
					</view>
				</u-cell-item>
			</u-cell-group>
			<!-- <view class="section btn-container">
				<button class="line-btn" @tap="toDown">下载mp3</button>
			</view> -->
			<ad unit-id="adunit-21a6bcd0e78f8ff8"></ad>
		</view>
		<!-- <view class="section btn-container" style="color: #888888;">更多功能还在开发中...</view> -->
	</view>
</template>

<script>


export default {
	components: {
	},
	/**
	 * 用户点击右上角分享
	 */
	onShareAppMessage: function(ops) {
		if (ops.from === 'button') {
			// 来自页面内转发按钮
			console.log(ops.target);
		}
		return {
			title: 'Hi~我是配音小助手，可以把文字转成各种语音,你也快来试试~',
			path: 'pages/index/index',
			success: function(res) {
				uni.showToast({
					title: '谢谢您的转发，请收下我的膝盖',
					icon: 'none',
					duration: 1500
				});
			},
			fail: function(res) {
				
			}
		};
	},
	data() {
		return {};
	},

	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad: function(options) {
		
	},

	/**
	 * 生命周期函数--监听页面初次渲染完成
	 */
	onReady: function() {},

	/**
	 * 生命周期函数--监听页面显示
	 */
	onShow: function() {
		
	},
	methods: {
		
		toInfo: function(scene) {
			console.log(scene)
			this.$u.route({
				url: 'pages/info/info',
				params: {
					scene: scene
				}
			});
		}
	}
};
</script>
<style>
.ad-container {
	margin-top: 8upx;
}
page {
	background-color: RGB(245, 245, 245);
}
.container-wrap {
	min-height: 100%;
	/* padding: 30rpx 5%; */
	/* width: 90%; */
}
textarea {
	width: 100%;
	padding: 20rpx 0;
	height: 250rpx;
	font-size: 32rpx;
}
.textarea-wrp {
	padding: 0 25rpx;
	background-color: #fff;
}
.clear-text-icon {
	position: absolute;
	z-index: 2;
	top: 60rpx;
	left: 660rpx;
}

.page-section {
	width: 100%;
	margin-bottom: 60rpx;
}
.section_gap {
	margin: 30rpx 0;
}
.page-section:last-child {
	margin-bottom: 0;
}

.section_title {
	width: 20%;
	font-size: 36rpx;
	line-height: 250%;
	font-weight: 400;
	color: #999999;
}

radio {
	transform: scale(0.8);
}
.radio-text {
	font-size: 36rpx;
	color: #999999;
}
.body-view {
	display: flex;
	height: 50rpx;
}
.body-view slider {
	width: 80%;
}

.page-section-title {
	margin: 20rpx 0;
	font-size: 36rpx;
	font-weight: 400px;
	color: #999999;
	padding-left: 10rpx;
	padding-right: 30rpx;
}
.btn-container {
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin-top: 80rpx;
}
.line-btn {
	margin: 2rpx 50rpx;
	background-color: #1e90ff;
	color: white;
	font-size: 36rpx;
	line-height: 72rpx;
}
</style>
